<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="register"
    :title="displayModuleTitle"
    width="90%"
    :closeFunc="
      () => {
        $emit('success');
        return true;
      }
    "
  >
    <BasicTable @register="registerIdentifyLogTable" v-if="mode == 'identify'">
      <template #tm="{ record }">
        <span @click="onOpenHazardIdentifyInfoModalButtonClick(record)">{{
          moment(record.tm).format('YYYY-MM-DD')
        }}</span>
      </template>
      <template #identificationresult="{ record }">
        <a-tag
          v-if="record.identificationresult !== null && record.identificationresult !== undefined"
          :color="
            identifyOptions.filter((item) => item.value == record.identificationresult)[0]?.color
          "
        >
          {{
            identifyOptions.filter((item) => item.value == record.identificationresult)[0]?.text
          }}</a-tag
        >
      </template>
    </BasicTable>

    <BasicTable @register="registerEduateLogTable" v-if="mode == 'evaluate'"> </BasicTable>

    <BasicTable @register="registerCorrectLogTable" v-if="mode == 'correct'"> </BasicTable>

    <IdentifyConfirmModal @register="registerHazardIdentifyInfo" />
  </BasicDrawer>
</template>
<script lang="ts">
  import { computed, defineComponent, onMounted, ref, unref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicTable, useTable } from '/@/components/Table';
  import { displayTitle } from '/@/utils/QcUnifyUtil';
  import { QcUnifyTransToChildProps } from '/#/QcUnify';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { confirmIdentifyFormSchema } from './hazard.data';
  import { getOneHazardFullInfo } from '/@/api/ehs/hazard';
  const { createMessage } = useMessage();
  import { queryEnumOptions } from '/@/api/platform/enum';
  import IdentifyConfirmModal from './IdentifyConfirmModal.vue';
  import {
    hazardInfoSchema,
    identifyLogColumns,
    evaluateLogColumns,
    correctLogColumns,
  } from './hazard.data';
  export default defineComponent({
    components: { BasicDrawer, BasicTable, IdentifyConfirmModal },
    name: 'HazardLogInfo', // 只查看单个指定日志(辨识/评价/整改)的详细信息
    emits: ['success'],
    props: ['mode'],
    setup(props, { emit }) {
      const activeKey = ref('1');
      const qcUnifyProps = ref<QcUnifyTransToChildProps>();
      const dataId = ref();
      const identifyLog = ref([]);
      const evaluateLog = ref([]);
      const troubleCorrectLog = ref([]);
      const identifyOptions = ref();
      const riskLevelOptions = ref('');
      const [registerHazardIdentifyInfo, { openModal: openHazardIdentifyInfoModal }] = useModal();
      const [registerIdentifyLogTable, {}] = useTable({
        title: '辨识/上报记录',
        dataSource: identifyLog,
        columns: identifyLogColumns,
        pagination: false,
        showIndexColumn: false,
      });
      const [registerEduateLogTable, {}] = useTable({
        title: '风险等级评价记录',
        dataSource: evaluateLog,
        columns: evaluateLogColumns,
        pagination: false,
        showIndexColumn: false,
      });
      const [registerCorrectLogTable, {}] = useTable({
        title: '整改记录',
        dataSource: troubleCorrectLog,
        columns: correctLogColumns,
        pagination: false,
        showIndexColumn: false,
      });
      const [register, { closeDrawer }] = useDrawerInner((data) => {
        activeKey.value = '1';
        identifyLog.value = [];
        evaluateLog.value = [];
        troubleCorrectLog.value = [];
        if (data != undefined && data != null) {
          let unrefData = unref(data);
          qcUnifyProps.value = unrefData;
          //接收父组件传递的数据
          if (unrefData?.dataId) {
            dataId.value = unrefData.dataId;
            getOneHazardFullInfo(dataId.value).then((res) => {
              identifyLog.value = res.identifications;
              evaluateLog.value = res.evaluations;
              troubleCorrectLog.value = res.corrects;
            });
          }
        }
      });

      function onOpenHazardIdentifyInfoModalButtonClick(record) {
        let propsData: QcUnifyTransToChildProps = {
          moduleName: '危险源辨识/上报隐患',
          operateString: '查看记录',
          dataId: record.identifyid,
        };
        openHazardIdentifyInfoModal(true, propsData);
      }

      let displayModuleTitle = computed(() => {
        return displayTitle(qcUnifyProps.value);
      });

      onMounted(() => {
        queryEnumOptions('EhsHazardIndentificationResultTypeEnum,EhsRiskLevelEnum').then((res) => {
          // console.log('option res', res);
          if (res != undefined && res != null && res.length > 0x0) {
            const identifyOp = res[0].options.map((option) => {
              return {
                value: option.key,
                text: option.value,
                color: option.attribute?.split('"')[3],
              };
            });
            const riskOp = res[1].options.map((option) => {
              return {
                value: option.key,
                text: option.value,
                color: option.attribute?.split('"')[3],
              };
            });
            identifyOptions.value = identifyOp;
            riskLevelOptions.value = riskOp;
          }
        });
      });

      return {
        activeKey,
        register,
        closeDrawer,
        displayModuleTitle,
        identifyOptions,
        riskLevelOptions,
        identifyLog,
        evaluateLog,
        troubleCorrectLog,
        registerIdentifyLogTable,
        registerEduateLogTable,
        registerCorrectLogTable,
        registerHazardIdentifyInfo,
        onOpenHazardIdentifyInfoModalButtonClick,
      };
    },
  });
</script>
<style lang="less" scoped>
  /* 轮播图的图片的高度为轮播区域高度(20rem)减去上下的边距(合计1rem) */
  @swipper-img-height: 20rem-5rem;

  .ant-carousel :deep(.slick-slide) {
    height: @swipper-img-height;
    line-height: @swipper-img-height;
    background: #dcdcdc;
    overflow: hidden;
  }

  .ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: #fff;
    opacity: 0.5;
    z-index: 1;
  }
  .ant-carousel :deep(.custom-slick-arrow:before) {
    display: none;
  }
  .ant-carousel :deep(.custom-slick-arrow:hover) {
    opacity: 0.8;
  }

  .ant-carousel :deep(.slick-slide h3) {
    color: #ffffff;
  }

  //轮播图缩放样式
  .relative {
    width: 100%;
    height: 250px;
  }
  .relativdive {
    width: 100%;
    height: 250px;
  }
  .swipper-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .Alist {
    flex: 1;
    margin-left: 10px;
    padding: 0 10px;
    border-left: 1px solid rgb(247, 247, 247);
  }
</style>
